<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文档对象模型导航练习(Document Object Model Navigation Exercise)</title>
</head>
<body>

  <h3>table导航练习</h3>
  <table border="1" width="500" height="300">
    <tr>
      <td>第一行第一列</td>
      <td>第一行第二列</td>
      <td>第一行第三列</td>
    </tr>
    <tr>
      <td>第二行第一列</td>
      <td>第二行第二列</td>
      <td>第二行第三列</td>
    </tr>
    <tr>
      <td>第三行第一列</td>
      <td>第三行第二列</td>
      <td>第三行第三列</td>
    </tr>
  </table>

  <h3>ul导航练习</h3>
  <ul>
    <li>第一行第一列</li>
    <li>第一行第二列</li>
    <li>第一行第三列</li>
  </ul>

  <h3>form导航练习</h3>
  <form action="">
    <input type="text" name="username" id="username">
    <input type="password" name="password" id="password">
    <input type="submit" value="登录">
  </form>

  <script>
    // 1.获取table
    const table = document.getElementsByTagName('table')[0];
    // 2.获取table中所有的行
    const rows = table.rows;
    // 3.获取第一行
    const firstRow = rows[0];
    // 4.获取第一行中的所有单元格
    const cells = firstRow.cells;
    // 5.获取第一行中的第一个单元格
    const firstCell = cells[0];
    // 6.设置第一个单元格中的内容
    firstCell.innerHTML = '修改后的内容';
    console.log("table", table, rows, firstRow, cells, firstCell);
    
    // 1.获取ul
    const ul = document.getElementsByTagName('ul')[0];
    // 2.获取ul中的所有li
    const lis = ul.getElementsByTagName('li');
    // 3.获取第一个li
    const firstLi = lis[0];
    // 4.设置第一个li中的内容
    firstLi.innerHTML = '修改后的内容';
    console.log("ul", ul, lis, firstLi);

    // 1.获取form
    const form = document.getElementsByTagName('form')[0];
    // 2.获取form中的所有input
    const inputs = form.getElementsByTagName('input');
    // 3.获取第一个input
    const firstInput = inputs[0];
    // 4.设置第一个input中的内容
    firstInput.value = '修改后的内容';
    console.log("form", form, inputs, firstInput);
    
  </script>
  
</body>
</html>